<template>
    <div class="page-wrap" v-loading="loading">
        <!-- 搜索表单 -->
        <el-card class="search-form-card">
            <div class="search-form-wrap">
                <div class="search-form-item">
                    <div class="search-form-item-label">用户名：</div>
                    <div class="search-form-item-input">
                        <el-input v-model="search_form.userName" placeholder="请输入" :size="size" @keyup.native.enter="handleFormSearch"></el-input>
                    </div>
                </div>
                <div class="search-form-item">
                    <div class="search-form-item-label">角色名：</div>
                    <div class="search-form-item-input">
                        <el-input v-model="search_form.roleName" placeholder="请输入" :size="size" @keyup.native.enter="handleFormSearch"></el-input>
                    </div>
                </div>
                <div class="search-form-item">
                    <div class="search-form-item-label"></div>
                    <div class="search-form-item-input">
                        <el-button type="primary" :size="size" icon="el-icon-search"
                            @click="handleFormSearch">查询</el-button>
                        <el-button :size="size" @click="handleSearchFormReset">重置</el-button>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 表格区域 -->
        <el-card class="table-card">
            <!-- 工具栏 -->
            <div class="toolbar-box">
                <div class="left-box">
                    <el-button :size="size" icon="el-icon-refresh" @click="handleRefreshList"></el-button>
                    <el-button :size="size" icon="el-icon-plus" type="success" v-if="showAddBtn"
                        @click="handleAddRow()">新增</el-button>
                    <el-button :size="size" icon="el-icon-edit" type="success" @click="handleEditRow" v-if="showEditBtn"
                        :disabled="selectedRows.length != 1">编辑</el-button>
                    <el-button :size="size" icon="el-icon-delete" type="danger" @click="handleDelRows('')" v-if="showDelBtn" :disabled="selectedRows.length == 0">删除</el-button>
                </div>
                <div class="right-box">
                    <!-- <el-button :size="size" icon="el-icon-download">导出</el-button> -->
                </div>
            </div>
            <!-- 表格内容 -->
            <div class="table-box">
                <el-table :data="tableData" style="width: 100%" :border="border" :size="size"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="userName" label="用户名">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名">
                    </el-table-column>
                    <el-table-column prop="createdAt" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="updatedAt" label="修改时间">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" icon="el-icon-edit" circle size="mini" @click="handleEditRow(scope.row)" v-if="showEditBtn"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="handleDelRows(scope.row.id)" v-if="showDelBtn"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :pager-count="pagerCount"
                layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <!-- 弹窗 -->
        <form-dialog ref="formDialog" :title="dialog_title" :treeRoleData="treeRoleData" @submit="handleSubmit"></form-dialog>
    </div>
</template>

<script>
//引入混入逻辑
import mixin from '@/mixins/table'
//引入接口配置
import {indexApi, addApi, editApi, delApi, updateFieldApi, getRoleListApi} from '@/api/userRoles'
//引入弹出组件
import formDialog from './components/form-dialog.vue'

export default {
    name: 'userRoles',
    //CRUD所定义的字段和方法在mixin定义
    mixins: [mixin],
    data() {
        return {
            indexApi, addApi, editApi, delApi, updateFieldApi, getRoleListApi,
            
            search_form: {
                userName: "",
                roleName: "",
            },//搜索表单

            loading: false,//页面加载状态

            roleList: [],//角色列表
        }
    },
    components: {
        formDialog
    },
    created() {
        //获取表格数据
        this.getTableData()
        //获取角色列表数据
        this.getRoleList()
    },
    methods: {
        //重写编辑行
        handleEditRow(e){
            //数据初始化（区分行编辑还是顶部的编辑）
            const row = e.id? e:this.selectedRows[0]
            //非管理员
            if(this.userInfo.isAdmin != 1){
                //如果没有该角色权限，则不可以编辑
                const target = this.roleList.find(item=>{
                    return item.id == row.roleId
                })
                if(!target){
                    this.$message.error('您没有操作该角色的权限!');
                    return
                }
            }
            //对话框标题
            this.dialog_title = "编辑"
            //打开对话框
            this.$refs?.formDialog?.open("edit")
            //对话框数据初始化
            this.$refs?.formDialog?.initData(row)
        },
        //处理表单提交事件
        handleSubmit(form){
            //执行提交请求
            this.requestSubmit(form)
        },
        //获取角色列表数据
        async getRoleList(){
            try {
                //请求
                const result = await this.getRoleListApi()
                //处理返回
                if (result.code == 1) {
                    //保存表格数据
                    this.roleList = result.data || []
                }
            } catch (error) {
                console.log('error', error)
            }
        }
    },
    computed: {
        //树形的角色列表数据
        treeRoleData(){
            //转换成树形对象
            const roleTree = this.$utils.buildTree(this.$utils.deepCopy(this.roleList))
            //将树形对象最外层转换成数组
            const treeTableData = []
            for(var key in roleTree){
                treeTableData.push(roleTree[key])
            }
            return treeTableData
        }
    }
}
</script>

<style scoped></style>